<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/statistics' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>猪猪</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-table
        :data="userList"
        border
        stripe
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column type="index"></el-table-column>
        <el-table-column label="猪猪" prop="username"></el-table-column>
        <el-table-column label="本月收入" prop="income"></el-table-column>
        <el-table-column label="本月支出" prop="pay"></el-table-column>
        <el-table-column label="余额" prop="totalMoney"></el-table-column>

        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 更新收入的对话框 -->
    <el-dialog
      title="更新用户"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <el-divider></el-divider>
      <!-- 内容主体区域 -->
      <el-form
        :model="editForm"
        :rules="formRules"
        ref="editFormRef"
        label-width="80px"
        size="mini"
      >
        <el-form-item label="猪猪" prop="username">
          <el-input v-model="editForm.username"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editUser">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      queryInfo: {
        username: '',
        // 当前的页数
        pageNum: 1,
        // 当前每页显示多少条数据
        pageSize: 10,
        userId: window.sessionStorage.getItem('token'),
        startTime: '',
        endTime: ''
      },
      userList: [],
      editDialogVisible: false,
      editForm: {
        username: ''
      },
      // 添加表单的验证规则对象
      formRules: {
        username: [
          { required: true, message: '请输入收入金额', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getUsers()
  },

  methods: {
    // 获取所有的金额
    async getUsers() {
      const { data: res } = await this.$http.get('/user', {
        params: this.queryInfo
      })
      if (res.code !== 1) {
        return this.$message.error('获取所有用户失败！')
      }
      this.userList = res.data
      this.total = res.data.total
    },

    async showEditDialog(id) {
      const { data: res } = await this.$http.get('/user/getUserById/' + id)

      if (res.code !== 1) {
        return this.$message.error('查询猪猪失败！')
      }

      this.editForm = res.data
      this.editDialogVisible = true
    },

    editUser() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) {
          this.$message.warning('必填项不能为空')
          return
        }

        const { data: res } = await this.$http.put('/user', this.editForm)

        if (res.code !== 1) {
          this.$message.error('更新猪猪失败！')
        }

        this.$message.success('更新猪猪成功！')
        // 隐藏添加用户的对话框
        this.editDialogVisible = false
        this.$refs.editFormRef.resetFields()
        // 重新获取用户列表数据
        this.getUsers()
      })
    },

    // 监听修改用户对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.el-form .el-form-item .el-input {
  width: 240px;
}

.el-form {
  margin-left: 100px;
}
/deep/.el-dialog .el-dialog__footer {
  text-align: center;
  margin-top: -25px;
}
.el-dialog .el-divider {
  margin-top: -25px;
}
</style>
